<template>
    <div id="app" class="app-container">
      <main class="main-content">
        <section class="hero-section">
          <div class="hero-content">
            <h1>欢迎来到柿子文档</h1>
            <p>一个简洁高效的在线文档平台</p>
            <button class="primary-button"><router-link to="/project" style="text-decoration: none; color: white;">开始使用</router-link></button>
          </div>
        </section>
        <section class="about-section">
          <h2>关于柿子文档</h2>
          <p>柿子文档是一款专为团队协作设计的在线文档管理工具。无论是知识库管理、知识分享还是日常沟通，柿子文档都能帮助您高效地管理和共享文档。</p>
        </section>
        <section class="features-section">
          <h2>核心功能</h2>
          <div class="feature-cards">
            <div class="feature-card">
              <h3>团队协作</h3>
              <p>团队成员紧密相连，文档操作轻松实现。</p>
            </div>
            <div class="feature-card">
              <h3>版本控制</h3>
              <p>自动保存历史版本，随时查看。</p>
            </div>
            <div class="feature-card">
              <h3>权限管理</h3>
              <p>知识库的权限设置，保护文档安全。</p>
            </div>
          </div>
        </section>
      </main>
    </div>
  </template>
  
  <script>
  export default {
    name: 'App',
  };
  </script>
  
  <style>
  .app-container {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #333;
    background-color: white;
  }
  
  .main-content {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .hero-section {
    text-align: center;
    padding: 100px 0;
    background-color: #FFECB3; /* 淡橘色背景 */
    color: #333;
  }
  
  .hero-content {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .about-section, .features-section {
    padding: 50px 20px;
    text-align: center;
  }
  
  .primary-button {
    background-color: #188fff;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
  }
  
  .primary-button:hover {
    background-color: #093ada;
  }
  
  .features-section h2 {
    margin-bottom: 30px;
  }
  
  .feature-cards {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
  }
  
  .feature-card {
    background-color: #F9F9F9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    width: 300px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: left;
    margin-bottom: 20px;
  }
  
  .feature-card h3 {
    margin-top: 0;
    font-size: 1.5em;
    color: #333;
  }
  
  .feature-card p {
    margin: 10px 0 0 0;
    color: #666;
  }
  </style>
  
  
  
  